<template>
  <van-nav-bar title="余额充值" left-arrow @click-left="onBack" />

  <div class="clear"></div>
  <div class="clear"></div>
  <div class="user">
    <div class="user-image">
      <img :src="LoginAuth.avatar_cdn" alt="" />
    </div>
  </div>

  <div class="form">
    <van-form @submit="onCharge">
      <van-field
        v-model="LoginAuth.mobile"
        readonly
        name="mobile"
        label="充值账户"
        placeholder="手机号"
        label-align="right"
        label-width="4.5em"
        colon
        :rules="[{ required: true, message: '请填写手机号' }]"
      />

      <van-field
        v-model="LoginAuth.amount"
        name="amount"
        label="充值金额"
        placeholder="请输入充值金额"
        label-align="right"
        label-width="4.5em"
        colon
        :rules="[{ required: true, message: '请填写金额' }]"
      />

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 充值 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import { showNotify } from 'vant'
  export default {
    data() {
      return {
        LoginAuth: {},
      }
    },
    created() {
      this.LoginAuth = this.$cookies.get('LoginAuth') ? this.$cookies.get('LoginAuth') : {}
      if (this.LoginAuth.avatar) {
        this.avatar = [
          {
            url: this.LoginAuth.avatar_cdn,
          },
        ]
      }
      console.log(this.LoginAuth)
    },
    methods: {
      onBack() {
        this.$router.push('/business/base/index')
      },
      // 金额充值
      async onCharge(values) {
        let data = {
          id: this.LoginAuth.id,
          mobile: this.LoginAuth.mobile,
          amount: values.amount,
        }
        // 接口
        let result = await this.$api.charge(data)

        if (result.code === 1) {
          showNotify({
            type: 'success',
            message: result.msg,
            duration: 1000,
            onClose: () => {
              this.$router.push('/business/base/index')
            },
          })
        } else {
          showNotify({
            type: 'warning',
            duration: 1500,
            message: result.msg,
          })
        }
      },
    },
  }
</script>
<style>
  @import url('/assets/css/recharge.css');
  @import url('/assets/css/profile.css');
</style>
